<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <script src="./js/flexible.js"></script>
    <style>
        div{
            margin: 0;font-size: 12px;
        }
        p,h2,h3,h4{
            margin:0;padding:0;
            font-weight: 400;
        }
        .top{
            background: url("./img/img@2x.png") no-repeat;
            height: 5.626667rem;
            background-size: cover;
            position: relative;
        }
        .top>img{
            width: 1.306667rem;height: 1.306667rem;
            position: absolute;
            bottom: -0.653333rem;left: 8.293333rem;
        }
        .top>div{
            padding: 0 .426667rem;
            display: flex;
            justify-content: space-between;
        }
        .top>div>img{
            margin-top: 1.44rem;
            width: .64rem;height: .64rem;
        }
        .info{
            display: flex;
            padding: 0 .426667rem;
            justify-content: space-between;
        }
        .info>.left{
            display: flex;
            flex-direction: column;
        }
        .info>.left>h2{
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #2B2D2B;
            font-size: 16px;
            height: .64rem;line-height: .64rem;
            margin-top: .213333rem;
        }
        .info>.left>h4{
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #969899;
            height: .48rem;line-height: .48rem;
        }
        .info>.left>p{
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #E52E2E;
            font-size: 18px;
            margin-top: .106667rem;
            height: .72rem;
            line-height: .72rem;
        }
        .info>.left>p>span{
            font-size: 10px;
        }
        .info>.left>div{
            margin-top: .213333rem;
            display: flex;
            justify-content: left;
        }
        .info>.left>div>img{
            width: 2.4rem;height: .64rem;
        }
        .info>.right{
            height: .48rem;line-height: .48rem;
            color: #969899;
            margin-top: 1.6rem;
        }
        .nav{
            display: flex;
            justify-content: left;
        }
        .nav>img{
            width: 1.6rem;height: 1.173333rem;
        }
        .main>div{
            padding: 0 .426667rem;
        }
        .main>div:nth-of-type(1){
            margin-left: .106667rem;
            position: relative;
            height: .56rem;
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #2B2D2B;
            line-height: .56rem;
            margin-bottom: .213333rem;
        }
        .main>div:nth-of-type(1)::before{
            content: "";  
            position: absolute;
            display: block;
            height: .32rem;   
            width: .053333rem;
            background: #1EC1F4;
            left: .32rem;
            top:50%;
            margin-top: -0.16rem;
        }
        .main>div:nth-of-type(2){
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;     
            height: .8rem;
            line-height: .8rem;
            text-align: center;
        }
        .main>div:nth-of-type(2)>div:nth-of-type(1){
            width: 2.346667rem;height: .8rem;
            background: #1EC1F4;            
        }
        .main>div:nth-of-type(2)>div:nth-of-type(2){
            width: 6.72rem;height: .8rem;
            background: #1EC1F4;
        }
        .main>.con{
            display: flex;
            margin: 0 .426667rem;
            padding: 0;
            height: 2.933333rem;
            justify-content: space-between;
            line-height:  2.933333rem;
            text-align: center;
        }
        .main>div:nth-of-type(3){
            border-bottom: 1px solid #F0F4F5 ;
        }
        .main>.con>div:nth-of-type(1){
            width: 2.346667rem;
            height: 2.933333rem  ;   
            color:#2B2D2B;     
            font-weight: 600;
        }
        .main>.con>div:nth-of-type(2){
            box-sizing:border-box;
            width: 6.72rem;
            height: 2.933333rem;
            padding:0 .426667rem;
        }
        .main>.con>div:nth-of-type(2)>h3{
            height: .48rem;
            margin-top: .213333rem;
            font-size: 12px;
            text-align:left;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #626566;
            line-height: .48rem;
        }
        .main>.con>div:nth-of-type(2)>p{
            margin-top: .106667rem;
            width: 5.84rem;
            text-align: left;
            line-height: .48rem;
            /* text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap; */
        }
        .more{
            display: flex;
            justify-content: center;
            margin-top: .133333rem;
            color: #969899;
            height: .48rem;line-height: .48rem;
        }
        .bottom{
            width: 100%;
            position: fixed;
            bottom: .906667rem;
            display: flex;
            height: 1.306667rem;
            justify-content: space-around;
            align-items: center;
        }
        .bottom>div:first-of-type{
            display: flex;
        }
        .bottom>div:first-of-type>div:first-of-type{
           margin-right: .8rem;
        }
        .bottom>div:last-of-type{
            background: #1EC1F4;
            width: 4.773333rem;height: 1.6rem;
            line-height: 1.6rem;
        }
        .bottom>div:last-of-type>p{
            text-align: center;
            font-size: 14px;
            color:#fff;
        }
        .footer{
            background: #fff;position: fixed;
            bottom:0;
            height: .906667rem;
        }
        .footer>.btn{
            width: 3.573333rem;height: .133333rem;
            background: #000;
            border-radius: 2.666667rem;
            margin: 0 3.213333rem;
            margin-top: .56rem;
            margin-bottom: .213333rem;
        }
    </style>
</head>
<body>
    <div class="top">
        <div>
            <img src="./img/ic_return.png"/>
            <img src="./img/ic_share.png"/>
        </div>
        <img src="./img/ic_tel.png"/>
    </div>
    <div class="info">
        <div class="left">
            <h2>入职体检套餐</h2>
            <h4>企业团检享受更多优惠</h4>
            <p><span>￥</span>178<span>.00</span></p>
            <div>
                <img src="./img/ylxk.png">
                <img src="./img/mfgq.png">
                <img src="./img/wjkt.png">
            </div>
        </div>
        <div class="right">已售10w份</div>
    </div>
    <div class="nav">
        <img src="./img/矩形.png"/>
        <img src="./img/矩形(1).png"/>
        <img src="./img/矩形(2).png"/>
        <img src="./img/矩形(3).png"/>
       
    </div>
    <div class="main">
        <div>套餐项目(8)</div>
        <div class="tit">
            <div>检查项目</div>
            <div>检查指标意义</div>
        </div>
        <div class="con">
            <div>内科</div>
            <div>
                <h3>科室检查</h3>
                <p>通过望、触、叩、听等物理方法检查心、肺、肝、脾、胃、肾及神经系统等脏器的基本内科 情况，寻找疾病有关线索，初步排除常见疾病。</p>
            </div>
        </div>
        <div class="con">
            <div>外科</div>
            <div>
                <h3>科室检查</h3>
                <p>通过体格检查，检查皮肤、甲状腺、脊柱四肢、乳腺等重要脏器基本情况，发现常外科 见外科疾病的相关征兆，或初步排除外科常见疾病。</p>
            </div>
        </div>
        <div class="more"><div>查看更多<span>&gt;</span></div></div>
    </div>
    <div class="bottom">
        <div>
            <div><img src="./img/ic_present friends.png"/><p>赠送亲友</p></div>
            <div><img src="./img/ic_messages.png"/><p>咨询客服</p></div>
        </div>
 
        <div><p>立即抢购</p></div>
    </div>
    <div class="footer">
        <div class="btn"></div>
    </div>
</body>
</html>